<template>
  <div class="plugin-goods-menu-select left-box" style="padding-right: 20px">
    <t-menu class="menu" theme="light" v-model="id" @change="emit('update:modelValue', id)">
      <t-menu-item :value="0">
        <template #icon>
          <t-icon name="layers" />
        </template>
        {{ plugin.t('menu.no') }}
      </t-menu-item>
      <t-menu-item v-for="item in menuStore.getList()" :value="item.id">
        <template #icon>
          <t-icon name="folder" />
        </template>
        {{ item.name }}
      </t-menu-item>
    </t-menu>
    <div class="tools">
      <t-button shape="square" theme="default" @click="form.open({})">
        <template #icon>
          <t-icon name="add" />
        </template>
      </t-button>
    </div>
  </div>
  <Form ref="form" />
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../index'
  import menuStore from '../../store/menu'
  import Form from './form.vue'

  const props = defineProps(['modelValue'])
  const emit = defineEmits(['update:modelValue'])
  const plugin = index.plugin
  const form = ref(null)
  const id = ref(props.modelValue)

  // 加载
  menuStore.get()
</script>
<style lang="scss">
  .plugin-goods-menu-select{
    .menu{
      background: 0;
      .t-default-menu__inner .t-menu{
        padding: 0
      }
      .t-menu__item.t-is-active:not(.t-is-opened){
        background-color: var(--td-brand-color-2)
      }
    }

    .tools{
      padding: 30px 0;
      text-align: center;

      button{
        margin: 0 5px;
      }
    }
  }
</style>